<template>
  <div>
    <a-modal
      title="从数据库导入表单"
      :visible="sqlImportFormVisible"
      :confirm-loading="confirmLoading"
      @ok="sqlImportFormOk"
      @cancel="sqlImportFormCancel"
    >
      <div class="head-selected">
        <span>表名：</span>
        <a-input placeholder="请输入表名按回车查询" @pressEnter="onPressEnter" v-model="queryTableName"></a-input>
      </div>
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowsqlImportForm.length }}</a
          >项
          <a style="margin-left: 24px" @click="onClearSelectedSql">清空</a>
        </div>
        <!-- <div></div> -->
        <a-table
          ref="sqlImportFormtable"
          size="middle"
          bordered
          rowKey="id"
          :columns="sqlImportFormColumns"
          :dataSource="sqlImportFormData"
          :pagination="sqlImportFormIpagination"
          :loading="confirmLoading"
          class="j-table-force-nowrap"
          @change="handleSqlTableChange"
          :rowSelection="{ selectedRowKeys: selectedRowsqlImportForm, onChange: onSelectChangesqlImportForm }"
        >
        </a-table>
      </div>
      <div slot="footer">
        <a-button @click="sqlImportFormCancel">关闭</a-button>
        <a-button type="primary" @click="sqlImportFormOk" :loading="loading" icon="swap"> 生成表单 </a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { queryTables, transTables } from '@/api/api'
export default {
  name: 'sqlImportForm',
  props: {
    sqlImportFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      /* 分页参数 */
      sqlImportFormIpagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        // showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },

      sqlImportFormtableLoading: false,
      queryTableName: '',
      sqlImportFormData: [],
      selectedRowsqlImportForm: [],
      sqlImportFormColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '表名',
          dataIndex: 'id',
          align: 'center',
          sorter: true,
        },
      ],
      //   sqlImportFormVisible: false,
      confirmLoading: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    init() {
      this.selectedRowsqlImportForm = []
      this.sqlImportFormIpagination.current = 1
      this.getData()
    },
    getData() {
      this.confirmLoading = true
      queryTables({
        queryTableName: this.queryTableName,
        pageNo: this.sqlImportFormIpagination.current,
        pageSize: this.sqlImportFormIpagination.pageSize,
      }).then((res) => {
        this.confirmLoading = false
        if (res.success) {
          console.log(res.result.records, 'res.result.recordsres.result.recordsres.result.records')
          this.sqlImportFormData = res.result.records
          this.sqlImportFormIpagination.total = res.result.total
          // this.sqlImportFormIpagination.current = res.result.current
        } else {
          this.sqlImportFormData = []
        }
      })
    },
    handleSqlTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      console.log(pagination, 'pagination')
      this.sqlImportFormIpagination = pagination
      this.getData()
    },
    onPressEnter() {
      this.getData()
      // queryTableName
    },
    onClearSelectedSql() {
      this.selectedRowsqlImportForm = []
    },
    onSelectChangesqlImportForm(v) {
      this.selectedRowsqlImportForm = v
    },
    sqlImportFormOk() {
      if (this.selectedRowsqlImportForm.length > 0) {
        this.loading = true
        console.log(this.selectedRowsqlImportForm.toString(), 'this.selectedRowsqlImportForm.toString()')
        transTables({ tbnames: this.selectedRowsqlImportForm.toString() }).then((res) => {
          if (res.success) {
            this.loading = false
            // this.getData()
            this.$emit('confirm', true)
            this.queryTableName = ''
          } else {
            this.$antdMessage.error(res.message)
          }
        })
      } else {
        this.$antdMessage.error('请勾选表')
      }
    },
    sqlImportFormCancel() {
      this.$emit('confirm', false)
      this.queryTableName = ''
    },
  },
}
</script>
<style lang="less" scoped>
.head-selected {
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  span {
    width: 50px;
  }
}
</style>